<template>
  <div class="echart" ref="chartInit" :style="{ width: '100%', height: '100%' }"></div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    initChart(key, data_val) {
      let option;
      switch (key) {
        //首页图表
        case "index":
          option = this.set_index_option(data_val);
          break;
        //报告图表
        case "report":
          option = this.set_report_option(data_val);
          break;
      }
      let getchart = this.$echarts.init(this.$refs.chartInit);
      getchart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        this.$nextTick(() => {
          getchart.setOption(option, true);
          getchart.resize();
        });
      });
    },

    set_index_option(data) {
      return {
        grid: {
          left: "30", // 与容器左侧的距离
          right: "0", // 与容器右侧的距离
          top: "30", // 与容器顶部的距离
          bottom: "30", // 与容器底部的距离
        },
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: "line",
          },
        ],
      };
    },

    set_report_option(data) {
      return {
        legend: {},
        tooltip: {},
        dataset: {
          source: [
            ["product", "查询次数", "申请机构数"],
            ["近2个月", 43, 85],
            ["近4个月",  73, 55],
            ["近6个月", 86, 65],
            ["近8个月", 72, 53],
            ["近12个月", 76, 51],
          ],
        },
        xAxis: { type: "category" },
        yAxis: {},
        series: [{ type: "bar" }, { type: "bar" }],
      };
    },
  },
};
</script>
